<template >
    <div class="bgc">
        <div class="animate__animated animate__zoomInLeft">
            <div class="member">
                <el-form-item class="searchButton">
                    <el-button type="primary" @click="handleADD">添加商品信息</el-button>
                </el-form-item>
            </div>

            <el-table :data="filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                style="width: 100%">

                <el-table-column type="selection" width="55" />
                <el-table-column label="序号" prop="id" />
                <el-table-column label="商品名称" prop="goodsName" />
                <el-table-column label="价格(元)" prop="price" />
                <el-table-column label="成分" prop="tagContent">
                </el-table-column>
                <el-table-column align="right">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="请输入查询内容" />
                    </template>
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="filterTableData.length"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <Up @get-list="getTableList"></Up>
        <Ad @get-list="getTableList"></Ad>
    </div>
</template>
  
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, ref } from 'vue'
import http from "../util/api"
import Up from '../components/DityUpdate.vue'
import Ad from "../components/Dityadd.vue"
import { useStore } from 'vuex';
let store = useStore()
//当前页数
const currentPage = ref(1)
//每页显示个数
const pageSize = ref(10)
//是否使用小型分页样式
const small = ref(true)
//是否禁用分页
const disabled = ref(false)
// 是否为分页按钮添加背景色
const background = ref(false)

//搜索输入框
const search = ref('')

interface User {
    id: any;
    date: string
    name: string
    price: any
    address: string
}
const userlist = ref([])

//显示个数变化
const handleSizeChange = (val: number) => {
    pageSize.value = val
}

//页码改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}
onMounted(() => {
    getTableList()
})


//获取商品信息
const getTableList = () => {
    http('/production').then((res: any) => {
        console.log(res);
        if (res.data.length) {
            ElMessage({
                message: '信息获取成功！',
                type: 'success',
            })
            userlist.value = res.data
        } else {
            ElMessage({
                message: '信息获取失败！',
                type: 'error',
            })
        }
    })
}

const filterTableData = computed(() =>
    userlist.value.filter(
        (data: any) =>
            !search.value ||
            data.goodsName.toLowerCase().includes(search.value.toLowerCase()) || data.price.toLowerCase().includes(search.value.toLowerCase())
    )
)
// 打开编辑框
const handleEdit = (row: any) => {
    console.log(row)
    store.commit('changeDialog')
    store.commit('showEdit', row)
}
// 打开添加编辑框
const handleADD = () => {
    store.commit('Dialog')
}
// 删除信息
const handleDelete = (row: any) => {
    console.log(row)
    ElMessageBox.confirm(
        '确认删除该信息吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http(`/production/${row.id}`, 'delete').then((res: any) => {
                if (res.status === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功！',
                    })
                    getTableList()
                } else {
                    ElMessage({
                        type: 'error',
                        message: '删除失败！',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消！',
            })
        })
}

</script>
<style lang="scss" scoped>
.bgc{
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}
.shop {
    width: 100%;
    height: 100%;
    background-color: #fff;
}
</style>
